import React, {Component} from 'react';
import axios from "axios";
import PubSub from "pubsub-js"

class Search extends Component {
  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">搜索用户</h3>
        <div>
          <input type="text" ref={(currentNode) => {
            this.input = currentNode
          }} placeholder="输入关键词点击搜索"/>&nbsp;
          <button onClick={this.search}>搜索</button>
        </div>
      </section>
    );
  }

  search = () => {
    //  获取用户的输入
    const {input: {value}} = this;
    // 发送请求前,通知List更新状态
    PubSub.publish("updateState", {
      isFirst: false,
      isLoading: true,
    })
    axios.get("/github/search/users", {
      params: {
        q: value
      }
    }).then(res => {
      const {items} = res.data;
      PubSub.publish("updateState", {
          isFirst: false,
          isLoading: false,
          userList: items
      })
    }, (err) => {
      PubSub.publish("updateState", {
            isLoading: false,
            err: err.message
      })
    })
  }
}

export default Search;